<template>
  <a-card class="general-card problem">
    <div class="difficulty-selector">
      <span class="label">难度：</span>
      <a-space :size="12">
        <a-button
          :class="[
            'difficulty-btn',
            { active: queryReq.difficulty === undefined }
          ]"
          @click="handleDifficultySelect(undefined)"
        >
          <template #icon>
            <icon-apps />
          </template>
          全部
        </a-button>
        <a-button
          :class="['difficulty-btn', { active: queryReq.difficulty === 0 }]"
          @click="handleDifficultySelect(0)"
        >
          <template #icon>
            <icon-sun />
          </template>
          入门
        </a-button>
        <a-button
          :class="['difficulty-btn', { active: queryReq.difficulty === 1 }]"
          @click="handleDifficultySelect(1)"
        >
          <template #icon>
            <icon-star />
          </template>
          进阶
        </a-button>
        <a-button
          :class="['difficulty-btn', { active: queryReq.difficulty === 2 }]"
          @click="handleDifficultySelect(2)"
        >
          <template #icon>
            <icon-fire />
          </template>
          挑战
        </a-button>
      </a-space>
    </div>
    <div class="problem-form">
      <a-row :gutter="16">
        <a-col :span="8">
          <a-input v-model="queryReq.title" placeholder="搜索题目" allow-clear>
            <template #prefix>
              <icon-search />
            </template>
          </a-input>
        </a-col>
        <a-col :span="8">
          <a-input-tag
            v-model="queryReq.tags"
            placeholder="搜索标签"
              allow-clear
          >
            <template #prefix>
              <icon-search />
            </template>
          </a-input-tag>
        </a-col>
        <a-col :span="8" style="display: flex; justify-content: flex-start">
          <div class="search-buttons">
            <a-button type="primary" @click="pageData">
              <template #icon>
                <icon-search />
              </template>
              查询
            </a-button>
            <a-button @click="reset">
                <template #icon>
                <icon-refresh />
                </template>
              重置
              </a-button>
          </div>
        </a-col>
      </a-row>
    </div>
    <a-table
      class="problem-table"
      row-key="id"
      bordered
      :columns="columns"
      :data="data.problemList"
      :loading="loading"
      :pagination="pagination"
      @page-change="handlePageNumberChange"
      @page-size-change="handlePageSizeChange"
    >
      <template #Title="{ record }">
        <a-link @click="handleDoProblem(record.id)">
          {{ record.title }}
        </a-link>
      </template>
      <template #Tags="{ rowIndex }">
        <a-space wrap size="mini">
          <a-tag
            v-for="tag in data.problemList[rowIndex].tags"
            :key="tag"
            :style="{
              backgroundColor: '#e8f3ff',
              color: '#165dff',
              border: 'none',
              padding: '0 8px',
              fontSize: '13px'
            }"
          >
              {{ tag }}
            </a-tag>
        </a-space>
      </template>
      <template #Difficulty="{ record }">
        <a-tag v-if="record.difficulty === '简单'" color="green">入门</a-tag>
        <a-tag v-else-if="record.difficulty === '中等'" color="orange">
          进阶
        </a-tag>
        <a-tag v-else color="red">挑战</a-tag>
      </template>
      <template #ThroughRate="{ record }">
        <a-statistic
          :value="record.submitNum / record.acceptedNum"
          :precision="2"
          :value-style="{ color: '#0fbf60', fontSize: '1.0em' }"
        >
          <template #suffix>%</template>
        </a-statistic>
      </template>
    </a-table>
  </a-card>
</template>

<script setup lang="ts">
import { PaginationProps, TableColumnData } from '@arco-design/web-vue';
import { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
import { onMounted, reactive, ref, unref } from 'vue';
import { OjProblemPageVo } from '@/api/gen-api/models/problem/OjProblemPageVo.ts';
import { OjProblemQueryRequest, OjProblemService, Paging } from '@/api/gen-api';
import { useRouter } from 'vue-router';
import {
  IconApps,
  IconSun,
  IconStar,
  IconFire,
  IconSearch,
  IconRefresh
} from '@arco-design/web-vue/es/icon';

const columns: TableColumnData[] = [
  {
    title: 'ID',
    dataIndex: 'id',
    cellStyle: {
      display: 'none'
    }
  },
  {
    title: '标题',
    dataIndex: 'title',
    align: 'center',
    slotName: 'Title',
    width: 300
  },
  {
    title: '',
    dataIndex: 'tags',
    slotName: 'Tags',
    align: 'left',
    width: 200
  },
  {
    title: '难度',
    dataIndex: 'difficulty',
    align: 'center',
    slotName: 'Difficulty'
  },
  {
    title: '通过率',
    dataIndex: 'throughRate',
    align: 'center',
    slotName: 'ThroughRate'
  }
];
const contentTypeOptions: SelectOptionData[] = [
  {
    label: '简单',
    value: 0
  },
  {
    label: '中等',
    value: 1
  },
  {
    label: '困难',
    value: 2
  }
];
const handlePageSizeChange = (pageSize: number) => {
  paging.pageSize = pageSize;
  pageData();
};

const handlePageNumberChange = (pageNumber: number) => {
  paging.pageNum = pageNumber;
  pageData();
};

const loading = ref(false);
const data = reactive({
  problemList: [] as OjProblemPageVo[]
});
const pagination = reactive<PaginationProps>({
  showTotal: true,
  showPageSize: true,
  pageSizeOptions: [5, 10, 50, 100]
});

const queryReq = ref<OjProblemQueryRequest>({
  title: '',
  tags: [],
  difficulty: undefined
});

/**
 * 查询数据
 */
const pageData = async () => {
  loading.value = true;
  await OjProblemService.page2(paging, unref(queryReq))
    .then(res => {
      const result = res.result;
      data.problemList = result.records;
      pagination.total = result.totalRow;
      pagination.current = paging.pageNum;
      pagination.pageSize = paging.pageSize;
    })
    .finally(() => {
      loading.value = false;
    });
};

const paging: Paging = reactive({
  pageNum: 1,
  pageSize: 5
});

onMounted(() => {
  pageData();
});

/**
 * 重置查询条件
 */
const reset = () => {
  queryReq.value = {};
  paging.pageNum = 1;
  pageData();
};

const router = useRouter();

/**
 * 跳转到做题页面
 */
const handleDoProblem = (problemId: any) => {
  router.push({ name: 'DoProblem', query: { id: problemId } });
};

const handleDifficultySelect = (difficulty: number | undefined) => {
  queryReq.value.difficulty = difficulty;
  pageData();
};
</script>

<style scoped lang="less">
.problem {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-bg-2);
  padding: 16px;
}

.difficulty-selector {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-2);

  .label {
    color: var(--color-text-2);
    margin-right: 12px;
    font-size: 14px;
    font-weight: 500;
  }

  .difficulty-btn {
    background-color: #fff;
    border: 1px solid #e5e6eb;
    border-radius: 6px;
    padding: 8px 20px;
    color: #2759CD;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 2px 4px rgba(39, 89, 205, 0.05);
    transform: translateY(0);

    &:hover {
      background-color: #f5f8ff;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(39, 89, 205, 0.15);
    }

    &:active {
      transform: translateY(1px);
      box-shadow: 0 1px 2px rgba(39, 89, 205, 0.1);
    }

    &.active {
      background-color: #2759CD;
      color: #fff;
      border-color: #2759CD;
      box-shadow: 0 4px 8px rgba(39, 89, 205, 0.25);
    }

    :deep(.arco-icon) {
      margin-right: 6px;
      font-size: 16px;
    }
  }
}

.problem-form {
  background-color: var(--color-fill-1);
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;

  :deep(.arco-form-item) {
    margin-bottom: 0;
  }

  :deep(.arco-form-item-label-col) {
    text-align: left;
    padding-right: 12px;

    label {
      color: var(--color-text-2);
      font-weight: 500;
    }
  }

  :deep(.arco-input-wrapper),
  :deep(.arco-input-tag) {
    background-color: var(--color-bg-2);
    border-radius: 6px;
    border: 1px solid var(--color-border-2);
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(39, 89, 205, 0.02);

    &:hover {
      border-color: #2759CD;
      box-shadow: 0 2px 6px rgba(39, 89, 205, 0.08);
    }

    &.arco-input-focus {
      border-color: #2759CD;
      box-shadow: 0 0 0 2px rgba(39, 89, 205, 0.1);
    }

    .arco-icon-search {
      color: #2759CD;
      font-size: 16px;
      margin-right: 8px;
    }
  }

  :deep(.arco-input-tag) {
    .arco-input-tag-tag {
      background-color: var(--color-fill-2);
      border: none;
      border-radius: 4px;
      color: var(--color-text-1);
      margin: 2px;

      .arco-icon-hover {
        color: var(--color-text-3);

        &:hover {
          color: var(--color-text-1);
        }
      }
    }

    .arco-input-tag-input {
      margin-left: 4px; // 给输入框左侧一点间距
    }
  }
}

.search-buttons {
  display: flex;
  gap: 8px;
  margin-left: 16px;

  :deep(.arco-btn-primary) {
    background-color: #2759CD !important;
    color: #fff;
    border: none;
    box-shadow: 0 2px 4px rgba(39, 89, 205, 0.15);

    &:hover {
      background-color: #2251b9 !important;
      box-shadow: 0 4px 8px rgba(39, 89, 205, 0.25);
    }

    &:active {
      background-color: #1d4aa3 !important;
      box-shadow: 0 2px 4px rgba(39, 89, 205, 0.15);
    }
  }

  .arco-btn {
    padding: 0 20px;
    height: 32px;
    border-radius: 6px;
    transition: all 0.2s ease;

    :deep(.arco-icon) {
      margin-right: 6px;
      font-size: 16px;
    }
  }
}

.problem-table {
    margin: 20px 0;

  :deep(.arco-link) {
    color: #2759CD;

    &:hover {
      color: #2251b9;
    }
  }
}
</style>
